/**
 * Created with hong.rong
 * Date:2020/07/17
 */

import React from 'react'
import { Button, Upload, Modal } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import useUpload from '@/hooks/useUpload'
import { uploadURL } from '@/utils/config'

export default function FileUpload({ value, onChange }) {
  const {
    loading,
    previewVisible,
    previewImage,
    handleBeforeUpload,
    handleRemove,
    handleCustomRequest,
    handlePreview,
    handleCancel,
  } = useUpload({
    value,
    accept: useUpload.MIME_TYPE.IMAGE, // 上传文件类型，同antd
    size: 50, // 上传尺寸限制
    unit: useUpload.SIZE_UNIT.M, // 尺寸单位
    onChange,
  })

  const uploadProps = {
    name: 'file',
    data: {},
    fileList: value,
    action: uploadURL,
    beforeUpload: handleBeforeUpload,
    onRemove: handleRemove,
    onPreview: handlePreview,
    customRequest: handleCustomRequest,
  }
  return (
    <div>
      <Upload {...uploadProps}>
        <Button loading={loading}>
          <UploadOutlined /> 点击上传
        </Button>
      </Upload>
      <Modal
        title="图片预览"
        visible={previewVisible}
        footer={null}
        onCancel={handleCancel}
      >
        <img alt="图片" style={{ width: '100%' }} src={previewImage} />
      </Modal>
    </div>
  )
}
